<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LTable - 工单系统</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" th:href="@{/vendors/bundle.css}" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" th:href="@{/css/app.css}" type="text/css">
    <!-- end::custom styles -->

</head>
<body class="bg-white h-100-vh p-t-0">

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

<div class="p-b-50 d-block d-lg-none"></div>

<div class="container h-100-vh">
    <div class="row align-items-md-center h-100-vh">
        <div class="col-lg-6 d-none d-lg-block">
            <img class="img-fluid" th:src="@{/media/svg/login.svg}" alt="...">
        </div>
        <div class="col-lg-4 offset-lg-1">
            <div class="d-flex align-items-center m-b-20">
                <img th:src="@{/media/image/dark-logo.png}" class="m-r-15" width="40" alt="">
                <h3 class="m-0">LTable Users</h3>
            </div>
            <p>Sign in to continue.</p>
            <form th:action="@{/user_login}" method="post">
                <div class="form-group mb-4">
                    <input type="text" class="form-control form-control-lg" name="username" autofocus placeholder="Username" th:value="${username}">
                </div>
                <div class="form-group mb-4">
                    <input type="password" class="form-control form-control-lg" name="password" placeholder="Password" th:value="${password}">
                </div>
                <div class="form-group mb-4">
                    <div class="row">
                        <div class="col-md-7">
                            <input type="text" class="form-control form-control-lg" name="thevertifycode" placeholder="验证码">
                        </div>
                        <div class="col-md-2">
                            <img  th:src="@{/vertifycode}" alt="验证码" title="点击更换" onclick="this.src='/vertifycode?'+Math.random()"/>

                        </div>
                    </div>
                </div>
                <span  style="color: red" th:text="${msg}"></span>
                <button class="btn btn-primary btn-lg btn-block btn-uppercase mb-4">Sign In</button>
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="customCheck">
                        <label class="custom-control-label" for="customCheck">Keep me signed in</label>
                    </div>
                    <a href="#" class="auth-link text-black">Forgot password?</a>
                </div>
                <div class="row">
                    <div class="col-md-4 mb-4">
                        <a href="" class="btn btn-outline-facebook btn-block">
                            <i class="fa fa-wechat m-r-5"></i> With 微信
                        </a>
                    </div>
                    <div class="col-md-4 mb-4">
                        <a href="" class="btn btn-outline-google btn-block">
                            <i class="fa fa-qq m-r-5"></i> With QQ
                        </a>
                    </div>
                    <div class="col-md-4 mb-4">
                        <a href="" class="btn btn-outline-linkedin btn-block">
                            <i class="fa fa-weibo m-r-5"></i> With 微博
                        </a>
                    </div>
                </div>
                <div class="text-center">
                    Don't have an account? <a th:href="@{/register}" class="text-primary">Create</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- begin::global scripts -->
<script th:src="@{/vendors/bundle.js}"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
<script th:src="@{/js/app.js}"></script>
<!-- end::custom scripts -->

</body>
</html>